<template>
  <div class="date-util">
    <h1>时间戳工具</h1>
    <h2>当前时间戳:
      <el-link style="color: red;font-size: 35px" @click="this.targetTimeStamp2 = this.theTimeStamp">{{ theTimeStamp }}</el-link>
    </h2>
    <h2>当前时间:
      <el-link style="color: red;font-size: 35px" @click="this.targetDateString = this.thisDateString">{{ thisDateString }}</el-link>
    </h2>
    <span>日期转时间戳</span><br/>
    <el-input v-model="targetDateString" class="targetDateString" size="large" placeholder="时间"></el-input>
    <el-button class="dateToTimeStamp" type="primary" size="large" plain @click="dateToTimeStamp">转换》》》》</el-button>
    <el-input v-model="targetTimeStamp" class="targetTimeStamp" size="large" placeholder="时间戳"></el-input>
    <br/>
    <span>时间戳转日期</span><br/>
    <el-input v-model="targetTimeStamp2" class="targetDateString" size="large" placeholder="时间戳"></el-input>
    <el-button class="timeStampToDate" type="primary" size="large" plain @click="timeStampToDate">转换》》》》</el-button>
    <el-input v-model="targetDateString2" class="targetTimeStamp" size="large" placeholder="时间"></el-input>
  </div>
</template>

<script>
export default {
  name: "DateUtil",
  data() {
    return {
      theTimeStamp: 0,
      thisDateString: '',
      targetDateString: '',
      targetTimeStamp: '',
      targetDateString2: '',
      targetTimeStamp2: ''
    }
  },
  mounted() {
  },
  created() {
    this.currentTime()
  },
  methods: {
    getTimeStamp() {
      this.theTimeStamp = new Date().getTime()
      //获取当前时间并打印
      const _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.thisDateString = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    currentTime() {
      setInterval(this.getTimeStamp, 1000)
    },
    dateToTimeStamp() {
      this.targetTimeStamp = new Date(this.targetDateString).getTime()
    },
    timeStampToDate() {
      const _this = this
      //获取当前时间并打印
      console.log(_this.targetTimeStamp2)
      let date = new Date(Number(_this.targetTimeStamp2))
      console.log(date)
      console.log(_this.targetTimeStamp2)
      let yy = date.getFullYear();
      let mm = date.getMonth() + 1;
      let dd = date.getDate();
      let hh = date.getHours();
      let mf = date.getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = date.getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      this.targetDateString2 = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    }
  }
}
</script>

<style scoped>
.targetDateString, .targetTimeStamp {
  width: 300px;
}

.dateToTimeStamp, .timeStampToDate {
  margin: 20px;
}

.date-util{
  text-align: center;
}
</style>
